<template>
  <!--  地图容器 -->
  <div id="map" style="height: 100vh; width: 100%">
      1234
  </div>



</template>
<script setup>
import mapboxgl  from "mapbox-gl";
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
import {onMounted, reactive} from "vue";
//引入turf.js
import * as turf from '@turf/turf'

import * as THREE from 'three'
import { Threebox } from 'threebox-map'
let map;
let draw;
let tb;
/*
* 【使用GeoJSON source将多边形添加到地图】
* 地图通过addSource添加GeoJSON数据，之后通过addLayer创建新的填充图层并应用paint属性来设置多边形外观的样式
*
* */

const state = reactive({
  drawArea: 0
})
// onMounted(() => {
//   mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
//   // init map
//   map = new mapboxgl.Map({
//     container: 'map', // 地图容器id,
//     style: 'mapbox://styles/mapbox/streets-v11', // 地图样式
//     center: {lng: -73.97627, lat: 40.75155}, // 地图初始中心【经纬度】 starting position
//     zoom: 15.4, // 地图初始缩放界别41 // starting zoom
//     projection: 'globe', // 地图投影 为3D地球
//     pitch: 62, // 相对于地面3D视角的角度 // starting pitch
//     bearing: 172.5, // 东西南北 方向 正北方为0 // starting bearing
//     antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
//     essential: true,
//     renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
//     skipOnboarding: true,//可选择不等待瓦片加载
//   })
//
//   tb = (window.tb = new Threebox(
//     map,
//     map.getCanvas().getContext('webgl'),
//     {
//       defaultLights: true
//     }
//   ))
//
//   // Mapbox GL JS中的图层是异步的，通过使用事件绑定在合适的时间更改地图
//   // POI 信息点
//   map.on('style.load', () => {
//     initControls();
//     initSourceAndLayers();
//   })
//
// })

const initSourceAndLayers = () => {
  map.addLayer({
    id: 'custom-threebox-model',
    type: 'custom',
    renderingMode: '3d',
    onAdd: () => {
      const scale = 3.2;
      const options = {
        obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
        type: 'gltf',
        scale: {x: scale, y: scale, z: 2.7},
        units: 'meters',
        rotation: {x: 90, y: -90, z: 0}
      };
      tb.loadObj(options, (model) => {
        model.setCoords([-73.976799, 40.754145]);
        model.setRotation({x: 0, y: 0, z: 241});
        tb.add(model);
      })
    },
    render: () => {
      tb.update();
    }
  })
}
const initControls = () => {
  map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
  map.addControl(new mapboxgl.GeolocateControl())
  map.addControl(new mapboxgl.FullscreenControl())
  map.addControl(new mapboxgl.NavigationControl({visualizePitch: true}))
  map.addControl(new mapboxgl.ScaleControl())
}

</script>


<style scoped lang="scss">
.mapboxgl-popup {
  max-width: 400px;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
